<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Tab Styles Inspiration</title>
		<meta name="description" content="Tab Styles Inspiration: A small collection of styles for tabs" />
		<meta name="keywords" content="tabs, inspiration, web design, css, modern, effects, svg" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/tabs.css" />
		<link rel="stylesheet" type="text/css" href="css/tabstyles.css" />
  		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<svg class="hidden">
			<defs>
				<path id="tabshape" d="M80,60C34,53.5,64.417,0,0,0v60H80z"/>
			</defs>
		</svg>
		<div class="container">
		
			<header class="codrops-header">
				<h1>Tab Styles Inspiration <span>A small collection of styles for tabs</span></h1>
				<p class="support">Your browser does not support <strong>flexbox</strong>! <br />Please view this demo with a <strong>modern browser</strong>.</p>
			</header>
			<section>
				<div class="tabs tabs-style-bar">
					<nav>
						<ul>
							<li><a href="#section-bar-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-bar-2" class="icon icon-box"><span>Archive</span></a></li>
							<li><a href="#section-bar-3" class="icon icon-display"><span>Analytics</span></a></li>
							<li><a href="#section-bar-4" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-bar-5" class="icon icon-tools"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-bar-1"><p>1</p></section>
						<section id="section-bar-2"><p>2</p></section>
						<section id="section-bar-3"><p>3</p></section>
						<section id="section-bar-4"><p>4</p></section>
						<section id="section-bar-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-iconbox">
					<nav>
						<ul>
							<li><a href="#section-iconbox-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-iconbox-2" class="icon icon-gift"><span>Deals</span></a></li>
							<li><a href="#section-iconbox-3" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-iconbox-4" class="icon icon-coffee"><span>Work</span></a></li>
							<li><a href="#section-iconbox-5" class="icon icon-config"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-iconbox-1"><p>1</p></section>
						<section id="section-iconbox-2"><p>2</p></section>
						<section id="section-iconbox-3"><p>3</p></section>
						<section id="section-iconbox-4"><p>4</p></section>
						<section id="section-iconbox-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-underline">
					<nav>
						<ul>
							<li><a href="#section-underline-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-underline-2" class="icon icon-gift"><span>Deals</span></a></li>
							<li><a href="#section-underline-3" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-underline-4" class="icon icon-coffee"><span>Work</span></a></li>
							<li><a href="#section-underline-5" class="icon icon-config"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-underline-1"><p>1</p></section>
						<section id="section-underline-2"><p>2</p></section>
						<section id="section-underline-3"><p>3</p></section>
						<section id="section-underline-4"><p>4</p></section>
						<section id="section-underline-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-linetriangle">
					<nav>
						<ul>
							<li><a href="#section-linetriangle-1"><span>All Products</span></a></li>
							<li><a href="#section-linetriangle-2"><span>Electronics</span></a></li>
							<li><a href="#section-linetriangle-3"><span>Clothing</span></a></li>
							<li><a href="#section-linetriangle-4"><span>Multimedia</span></a></li>
							<li><a href="#section-linetriangle-5"><span>Toys</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-linetriangle-1"><p>1</p></section>
						<section id="section-linetriangle-2"><p>2</p></section>
						<section id="section-linetriangle-3"><p>3</p></section>
						<section id="section-linetriangle-4"><p>4</p></section>
						<section id="section-linetriangle-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-topline">
					<nav>
						<ul>
							<li><a href="#section-topline-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-topline-2" class="icon icon-gift"><span>Deals</span></a></li>
							<li><a href="#section-topline-3" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-topline-4" class="icon icon-coffee"><span>Work</span></a></li>
							<li><a href="#section-topline-5" class="icon icon-config"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-topline-1"><p>1</p></section>
						<section id="section-topline-2"><p>2</p></section>
						<section id="section-topline-3"><p>3</p></section>
						<section id="section-topline-4"><p>4</p></section>
						<section id="section-topline-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-iconfall">
					<nav>
						<ul>
							<li><a href="#section-iconfall-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-iconfall-2" class="icon icon-gift"><span>Deals</span></a></li>
							<li><a href="#section-iconfall-3" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-iconfall-4" class="icon icon-coffee"><span>Work</span></a></li>
							<li><a href="#section-iconfall-5" class="icon icon-config"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-iconfall-1"><p>1</p></section>
						<section id="section-iconfall-2"><p>2</p></section>
						<section id="section-iconfall-3"><p>3</p></section>
						<section id="section-iconfall-4"><p>4</p></section>
						<section id="section-iconfall-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
				<p>Re-created from <a href="http://www.jq22.com/">Vintage Productions</a></p>
			</section>
			<section>
				<div class="tabs tabs-style-linemove">
					<nav>
						<ul>
							<li><a href="#section-linemove-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-linemove-2" class="icon icon-box"><span>Archive</span></a></li>
							<li><a href="#section-linemove-3" class="icon icon-display"><span>Analytics</span></a></li>
							<li><a href="#section-linemove-4" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-linemove-5" class="icon icon-tools"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-linemove-1"><p>1</p></section>
						<section id="section-linemove-2"><p>2</p></section>
						<section id="section-linemove-3"><p>3</p></section>
						<section id="section-linemove-4"><p>4</p></section>
						<section id="section-linemove-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-line">
					<nav>
						<ul>
							<li><a href="#section-line-1"><span>Our Controls</span></a></li>
							<li><a href="#section-line-2"><span>Sony Playstation 4</span></a></li>
							<li><a href="#section-line-3"><span>Microsoft Xbox One</span></a></li>
							<li><a href="#section-line-4"><span>Nintendo Wii U</span></a></li>
							<li><a href="#section-line-5"><span>Microconsoles</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-line-1"><p>1</p></section>
						<section id="section-line-2"><p>2</p></section>
						<section id="section-line-3"><p>3</p></section>
						<section id="section-line-4"><p>4</p></section>
						<section id="section-line-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-circle">
					<nav>
						<ul>
							<li><a href="#section-circle-1" class="icon icon-plug"><span>Connect</span></a></li>
							<li><a href="#section-circle-2" class="icon icon-gift"><span>Gifts</span></a></li>
							<li><a href="#section-circle-3" class="icon icon-box"><span>Boxes</span></a></li>
							<li><a href="#section-circle-4" class="icon icon-date"><span>Prints</span></a></li>
							<li><a href="#section-circle-5" class="icon icon-plane"><span>Fun</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-circle-1"><p>1</p></section>
						<section id="section-circle-2"><p>2</p></section>
						<section id="section-circle-3"><p>3</p></section>
						<section id="section-circle-4"><p>4</p></section>
						<section id="section-circle-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-shape">
					<nav>
						<ul>
							<li>
								<a href="#section-shape-1">
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<span>Home</span>
								</a>
							</li>
							<li>
								<a href="#section-shape-2">
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<span>Design</span>
								</a>
							</li>
							<li>
								<a href="#section-shape-3">
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<span>Work</span>
								</a>
							</li>
							<li>
								<a href="#section-shape-4">
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<span>Portfolio</span>
								</a>
							</li>
							<li>
								<a href="#section-shape-5">
									<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
									<span>Contact</span>
								</a>
							</li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-shape-1"><p>1</p></section>
						<section id="section-shape-2"><p>2</p></section>
						<section id="section-shape-3"><p>3</p></section>
						<section id="section-shape-4"><p>4</p></section>
						<section id="section-shape-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-linebox">
					<nav>
						<ul>
							<li><a href="#section-linebox-5"><span>Airline</span></a></li>
							<li><a href="#section-linebox-4"><span>Schedule</span></a></li>
							<li><a href="#section-linebox-2"><span>Deals</span></a></li>
							<li><a href="#section-linebox-3"><span>Drinks</span></a></li>
							<li><a href="#section-linebox-5"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-linebox-1"><p>1</p></section>
						<section id="section-linebox-2"><p>2</p></section>
						<section id="section-linebox-3"><p>3</p></section>
						<section id="section-linebox-4"><p>4</p></section>
						<section id="section-linebox-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-flip">
					<nav>
						<ul>
							<li><a href="#section-flip-5" class="icon icon-plane"><span>Airline</span></a></li>
							<li><a href="#section-flip-4" class="icon icon-date"><span>Schedule</span></a></li>
							<li><a href="#section-flip-2" class="icon icon-gift"><span>Deals</span></a></li>
							<li><a href="#section-flip-3" class="icon icon-coffee"><span>Drinks</span></a></li>
							<li><a href="#section-flip-5" class="icon icon-tools"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-flip-1"><p>1</p></section>
						<section id="section-flip-2"><p>2</p></section>
						<section id="section-flip-3"><p>3</p></section>
						<section id="section-flip-4"><p>4</p></section>
						<section id="section-flip-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-circlefill">
					<nav>
						<ul>
							<li><a href="#section-circlefill-1" class="icon icon-plug"><span>Connect</span></a></li>
							<li><a href="#section-circlefill-2" class="icon icon-gift"><span>Gifts</span></a></li>
							<li><a href="#section-circlefill-3" class="icon icon-box"><span>Boxes</span></a></li>
							<li><a href="#section-circlefill-4" class="icon icon-date"><span>Prints</span></a></li>
							<li><a href="#section-circlefill-5" class="icon icon-plane"><span>Fun</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-circlefill-1"><p>1</p></section>
						<section id="section-circlefill-2"><p>2</p></section>
						<section id="section-circlefill-3"><p>3</p></section>
						<section id="section-circlefill-4"><p>4</p></section>
						<section id="section-circlefill-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			<section>
				<div class="tabs tabs-style-tzoid">
					<nav>
						<ul>
							<li><a href="#section-tzoid-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-tzoid-2" class="icon icon-box"><span>Archive</span></a></li>
							<li><a href="#section-tzoid-3" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-tzoid-4" class="icon icon-display"><span>Analytics</span></a></li>
							<li><a href="#section-tzoid-5" class="icon icon-tools"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-tzoid-1"><p>1</p></section>
						<section id="section-tzoid-2"><p>2</p></section>
						<section id="section-tzoid-3"><p>3</p></section>
						<section id="section-tzoid-4"><p>4</p></section>
						<section id="section-tzoid-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
				
			</section>
			<section>
				<div class="tabs tabs-style-fillup">
					<nav>
						<ul>
							<li><a href="#section-fillup-1" class="icon icon-home"><span>Home</span></a></li>
							<li><a href="#section-fillup-2" class="icon icon-gift"><span>Deals</span></a></li>
							<li><a href="#section-fillup-3" class="icon icon-upload"><span>Upload</span></a></li>
							<li><a href="#section-fillup-4" class="icon icon-coffee"><span>Work</span></a></li>
							<li><a href="#section-fillup-5" class="icon icon-config"><span>Settings</span></a></li>
						</ul>
					</nav>
					<div class="content-wrap">
						<section id="section-fillup-1"><p>1</p></section>
						<section id="section-fillup-2"><p>2</p></section>
						<section id="section-fillup-3"><p>3</p></section>
						<section id="section-fillup-4"><p>4</p></section>
						<section id="section-fillup-5"><p>5</p></section>
					</div><!-- /content -->
				</div><!-- /tabs -->
			</section>
			
		</div><!-- /container -->
		<script src="js/cbpFWTabs.js"></script>
		<script>
			(function() {

				[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
					new CBPFWTabs( el );
				});

			})();
		</script>
	</body>
</html>